<template>
<div class="app-view-container" ref="view">
  <mu-flexbox orient="vertical" :gutter="0" style="min-height:100%">
    <mu-flexbox-item grow="0">
      <app-calendar class="app-calendar skin-anniversary" :shouldActivedDate="shouldActivedDate" @selected="handleSelected" @monthChange="handleMonthChange"/>
    </mu-flexbox-item>
    <mu-flexbox-item class="app-content">
      <mu-list class="app-list" style="border: none;margin-bottom:16px">
        <mu-sub-header>纪念日提醒</mu-sub-header>
        <template v-for="item,j in descAnniversaryList">
          <mu-divider v-if="j!==0" />
          <mu-list-item class="item-large" :class="'record'+dateFormat(item.commemorateDate,'yyyyMMdd')" :to="{name:'anniversaryPage',params:{id:item.id},query:{type:item.type}}">
            <div class="app-item-icon" slot="left" v-if="item.type==1"><img class="is-round" src="../assets/images/sign_birthday.png"></div>
            <div class="app-item-icon" slot="left" v-if="item.type==2"><img class="is-round" src="../assets/images/sign_family.png"></div>
            <div class="app-item-icon" slot="left" v-if="item.type==3"><img class="is-round" src="../assets/images/sign_marry.png"></div>
            <div class="app-item-icon" slot="left" v-if="item.type==0"><img class="is-round" src="../assets/images/sign_other.png"></div>
            <div slot="title">{{item.commemorateName}}</div>
            <mu-icon-menu slot="right" icon="more_vert" :anchorOrigin="{horizontal: 'right', vertical: 'top'}" :targetOrigin="{horizontal: 'right', vertical: 'top'}" @click.native.prevent="">
              <mu-menu-item title="编辑" @click="$router.push({name:'anniversaryEdit',params:{id:item.id,action:'edit'}})"/>
              <mu-menu-item title="删除" @click="deleteItem(item)"/>
            </mu-icon-menu>
            <div slot="describe">
              {{new Date(item.commemorateDate).getFullYear()+'年'+(new Date(item.commemorateDate).getMonth()+1)+'月'+new Date(item.commemorateDate).getDate()+'日'}}
            </div>
          </mu-list-item>
        </template> 
        
      </mu-list>
      <div class="app-floatbtn-bar">
        <mu-float-button icon="add" mini class="demo-float-button" :to="{name:'anniversaryEdit',params:{id:'0',action:'add'}}"/>
      </div>
    </mu-flexbox-item>
  </mu-flexbox>
   <mu-dialog :open="dialog" title="警告" @close="close('dialog')">
    是否要删除该纪念日？
    <mu-flat-button slot="actions" @click="close('dialog')" default label="取消"/>
    <mu-flat-button slot="actions" primary @click="comfirmDelete" label="确定"/>
  </mu-dialog>
  <mu-infinite-scroll :scroller="scroller" :loading="loading" @load="loadMore"/>
</div>
</template>

<script>
  import Vue from 'vue'
  import {isEqualDate,transformMonth,dateFormat} from 'scripts/common'
  import services from 'services'
  export default {
    data () {
      return {
        today:new Date(),
        selectedDate:new Date(),
        displayDate:new Date().setDate(1),
        list:[],
        dialog:false,
        selectItem:[],
        currentPage:0,
        totalPage:1,
        loading: false,
        scroller: null
      }
    },
    computed:{
       inMonthFirstDate (){
        //获取上月份最后一天
        return new Date(new Date(this.displayDate).getFullYear(),new Date(this.displayDate).getMonth(),1)
       },
       inMonthLastDate (){
        //获取月份最后一天
        return new Date(new Date(this.displayDate).getFullYear(),new Date(this.displayDate).getMonth()+1,0,23,59,59)
       },
      activeDay () {
        //计算特殊日期
        return this.list.map(function(o){return o.commemorateDate})
      },
      descAnniversaryList () {
        //排序后的纪念日
        this.loopYear=null;
        return this.list.sort(function(item1,item2){
          return new Date(item1.commemorateDate).getTime()<new Date(item2.commemorateDate).getTime()
        })
      }
    },
    mounted () {
      
      this.scroller = this.$refs.view;
      this.getData();
    },
    beforeRouteUpdate (to,form,next){
      this.getData();
      next()
    },
    methods:{
        getData (){
        this.currentPage=0;
        this.list=[];
        this.loadMore ()
      },
      loadMore () {
        var vm=this;
        if (vm.currentPage>=vm.totalPage) return
        vm.loading = true
       //获取纪念日列表
       //console.log(this.scroller);
        services.AnniversaryService.getAnniversaryList({
          data:{
            currentPage:vm.currentPage+1,
            pageSize:10,
            inMonthFirstDate:this.inMonthFirstDate,//上个月最后一天
            inMonthLastDate:this.inMonthLastDate//本月最后一天
          },
          success:(data)=>{
            
            this.anniversaryList=data;

            vm.currentPage==0&&(vm.list=[]);

            vm.list=vm.list.concat(data.aaData);

            vm.totalPage=data.totalPage;

            vm.currentPage++;
            
          },
          complete:()=>{
            vm.loading = false
          }
        })
      },



     /* getData (){
        //获取
        services.AnniversaryService.getAnniversaryList({
            data:{
            inMonthFirstDate:this.inMonthFirstDate,//本月第一天c
            inMonthLastDate:this.inMonthLastDate//本月最后一天
          },
          success:(data)=>{
            this.anniversaryList=data

          }
        })
      },*/
      handleSelected (date) {
        this.selectedDate=date
        //选择日期，跳转至对应日期的记录上
        var record=document.querySelector('.record'+this.dateFormat(date,'yyyyMMdd'));
        record!== null&&(this.$refs.view.scrollTop=record.offsetTop)
      },
      handleMonthChange (displayDate) {
        //月份切换，displayDate为显示月份的1号
        this.displayDate=displayDate
        this.getData ()
      },
      shouldActivedDate (day) {
        //特殊日期
        for(var item of this.activeDay) {
          if(isEqualDate(new Date(item),day))
            return true
        }
        return false
      },
       isEqualDate:isEqualDate,
       dateFormat: dateFormat,
       deleteItem (item){
          this.selectItem=[item]
          this.dialog=true
       },
       comfirmDelete (){
        var vm=this
        this.dialog=false
        this.setLoading(true)
        //删除纪念日
        services.AnniversaryService.deleteAnniversary({
          type: 'post',
            data:{
              id: vm.selectItem[0].id
            },
            success:(data)=>{
              vm.$delete(vm.list,vm.list.indexOf(vm.selectItem[0]));
              vm.selectItem=[]
              vm.showToast('删除成功')
            },
            error:()=>{
              this.showToast('删除失败')
            },
            complete:()=>{
              vm.setLoading(false)
            }
          })
      },
      open (contrl) {
        this[contrl] = true
      },
      close (contrl) {
        this[contrl] = false
      },  
      setLoading (isLoading){  this.$store.dispatch('setLoading',isLoading) },
      showToast (toastText,time,callback){  this.$store.dispatch('showToast',{toastText,time,callback}) },
      hideToast (){  this.$store.dispatch('hideToast') }
    }
  }
</script>

<style>
.record-title{color: #338bc8;font-size: 14px;}
.record-subtitle{color: #999;font-size: 12px;line-height:18px;}
.record-content{color: #494949;padding:2px 0}
.record-action{text-align: right;}
</style>
